<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <script src="../js/jquery-3.1.1.js"></script>
        <title></title>
        <style>
            div{
                width: 300px;
                height: 400px;
                margin: 100px auto;
            }
            div span{
                display: inline-block;
                text-align: center;
                line-height: 1.5;
                float: left;
            }
            div span:after{
                clear: both;
            }
            div span:nth-of-type(1){
                background-color: lawngreen;
                width: 100px;
                height: 25px;
            }
            div span:nth-of-type(2){
                background-color:gray;
                width: 200px;
                height: 25px;
            }
            div span:nth-of-type(2):hover{
                cursor: pointer;
            }
            div ul{
                display: none;
                list-style: none;
                width: 199px;
                margin: 0;
                padding: 0;
                text-align: center;
                line-height: 1.5;
                margin-left: 99px;
                border: 1px solid red;
            }
            div ul li{
                width: 199px;
                height: 25px;
                border-bottom: 1px dotted red;
            }
            div ul li:hover{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div>
            <span>选择项目:</span>
            <span id="sp2">未选择</span>
            <ul>
                <li>html5</li>
                <li>css3</li>
                <li>javascript</li>
                <li>JQuery</li>
            </ul>
        </div>
    </body>
</html>

<script>
    // 绑定点击事件
    $('#sp2').click(function(){
        // 让ul显示
        $('ul').css('display','inline-block')
        // 给li标签绑定鼠标移动事件
        $('ul li').mousemove(function(){
            // 让当前对象变色 其他兄弟恢复白色
            $(this).css('background-color','gray')
            .siblings().css('background-color','white')
        })
        // 给li绑定点击事件
        $('ul li').click(function(){
            // 让当前li内的内容输入span标签内
            $('#sp2').text($(this).text());
            // 再让ul隐藏
            $('ul').css('display','none')
        })

    })




</script>